<!DOCTYPE html>
<html lang="en">

<head>
    <title> 查看法线 </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <!-- 3D 库 -->
    <script src="../库/babylon.max.js"></script>
    <style>
        html,
        body {
            overflow: hidden;
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
        }
    </style>
    <script>
        var $ = {};
        // 创建法线功能实现
        // 官方资料: https://doc.babylonjs.com/snippets/normals
        function showNormals(mesh, size, color, sc) {
            var normals = mesh.getVerticesData(BABYLON.VertexBuffer.NormalKind);
            var positions = mesh.getVerticesData(BABYLON.VertexBuffer.PositionKind);
            color = color || BABYLON.Color3.White();
            sc = sc || scene;
            size = size || 1;
            var lines = [];
            for (var i = 0; i < normals.length; i += 3) {
                var v1 = BABYLON.Vector3.FromArray(positions, i);
                var v2 = v1.add(BABYLON.Vector3.FromArray(normals, i).scaleInPlace(size));
                lines.push([v1.add(mesh.position), v2.add(mesh.position)]);
            }
            var normalLines = BABYLON.MeshBuilder.CreateLineSystem("normalLines", { lines: lines }, sc);
            normalLines.color = color;
            return normalLines;
        }
        // 元素创建代码
        var element = function (scene) {
            // 创建方块
            var box = BABYLON.MeshBuilder.CreateBox("box", {
                size: 5
            }, scene);
            // 设置颜色
            var myMaterial = new BABYLON.StandardMaterial("myMaterial", scene);
            myMaterial.diffuseColor = BABYLON.Color3.Blue();
            box.material = myMaterial;
            // 查看法线
            showNormals(
                box, // 模型
                0.25, // 线粗细
                new BABYLON.Color3(1, 0, 0), // 线颜色
                scene // Scene对象
            )
        }
        // 测试代码
        window.addEventListener('DOMContentLoaded', function () {
            // 获得元素
            var canvas = document.getElementById('renderCanvas');
            // 创建渲染
            var engine = new BABYLON.Engine(canvas, true);
            // 隔离创建
            var scene = (function () {
                // 创建一个基本的Scene对象，用来容纳所有其他对象
                var scene = new BABYLON.Scene(engine);
                // 创建一个相机，设置其位置为
                var camera = new BABYLON.FreeCamera('camera1', new BABYLON.Vector3(0, 20, -10), scene);
                // 相机聚焦在场景原点位置
                camera.setTarget(BABYLON.Vector3.Zero());
                // 使得我们可以控制相机拍摄角度，和three.js中的OrbitsControl效果类似，但简单得多
                camera.attachControl(canvas, false);
                camera.position.y = 10;
                camera.position.z = -40;
                camera.rotation.x = -0.1;
                camera.rotation.y = 0;
                // 创建模型
                element(scene)
                // 返回 Scene对象一个半球形光源,朝向为天空
                var light = new BABYLON.HemisphericLight('light1', new BABYLON.Vector3(0, 1, 0), scene);
                return scene;
            })();
            // 循环渲染
            engine.runRenderLoop(function () {
                scene.render();
            });
            //追加事件：帆布与大小调整程序
            window.addEventListener('resize', function () {
                engine.resize();
            });
        });
    </script>
</head>

<body>
    <canvas id="renderCanvas"></canvas>
</body>

</html>